<template>
  <div>
    <div class="header" v-show="channel==0||channel==3">
        <i class="iconfont icon-qianjin-copy" @click="iconClick"></i>
        取现详情
    </div>
    <div class="shu" v-show="channel==0||channel==3"></div>
      <div class="item">
        <div class="item-list"><div class="item-list-left">订单号</div><div class="item-list-right">{{methodList.order_no}}</div></div>
        <div class="item-list"><div class="item-list-left">取现金额</div><div class="item-list-right"><em style="font-size:0.64rem;color:#ff7a7b;">{{methodList.borrow_amount}}</em>元</div></div>
        <div class="item-list"><div class="item-list-left">手续费</div><div class="item-list-right"><em style="font-size:0.5333rem;">{{methodList.commission_amount}}</em>元<i @click="msg"></i></div></div>
        <div class="item-list"><div class="item-list-left">取现卡</div><div class="item-list-right">
            <img :src="methodList.borrowCodeBankImgUrl" alt="">
            <span>{{methodList.borrowCardName}}（{{methodList.borrowCardNo}}）</span>
            </div>
        </div>
        <div class="item-list">
            <div class="item-list-left">到账卡</div>
            <div class="item-list-right">
                <img :src="methodList.reachCardBankImgUrl" alt="">
                <span>{{methodList.reachCardName}}（{{methodList.reachCardNo}}）</span>
            </div>
        </div>
        <div class="item-list">
            <div class="item-list-left">订单状态</div>
            <div class="item-list-right" v-if="methodList.status_id=='1'">等待交易</div>
            <div class="item-list-right" v-else-if="methodList.status_id=='2' || methodList.status_id=='4' || methodList.status_id=='5'">交易中</div>
            <div class="item-list-right" v-else-if="methodList.status_id=='3' || methodList.status_id=='6'">交易失败（{{methodList.massage}}）</div>
            <div class="item-list-right" v-else-if="methodList.status_id=='7'">交易成功</div>
        </div>
        
        <div class="item-list" v-if="methodList.status_id!='1'">
            <div class="item-list-left" v-if="methodList.status_id=='2' || methodList.status_id=='4' || methodList.status_id=='5'|| methodList.status_id=='7'">交易时间</div>
            <div class="item-list-left" v-if="methodList.status_id=='6'">失败时间</div>
            <div class="item-list-right">{{methodList.create_time}}</div>
        </div>
      </div>
      <div class="btn" v-if="methodList.status_id=='1'&&canClick=='true'" @click="repay">立即取现</div>
      <div class="btn1" v-if="methodList.status_id=='1'&&canClick=='false'">立即取现</div>

      <!-- 支付验证码弹框 -->
      <div class="verification" v-if="code.isShow">
          <div class="verificationBox">
              <div class="title">请输入支付验证码</div>
              <div class="codeBox">
                  <input type="text" v-model="code.code">
                  <div @click="getCode">{{code.mesg}}</div>
              </div>
              <div class="footer1">
                  <div class="left" @click="cancel">放弃支付</div>
                  <div class="right" @click="toPay">确认支付</div>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
import Top from '@/components/Header';
import { MessageBox,Indicator } from 'mint-ui';
import { dateFormat } from 'vux';

export default {
  name: 'method',
  components: { Top },
  data() {
    return {
      channel:0,
      methodList:{
        
      },
      headTitle: '',
      canClick:'true',
      flag:true,
      code:{
          isShow:false,
          mesg:'获取验证码',
          time:60,
          flag:true,
          code:''
      }
    }
  },
  mounted() {
    window.localStorage.setItem('shouTogetchashObj','');
    // 查询取现详情
    this.$http.get('/loansupermarket-pay/order/enchashmentDetails?orderNo='+this.$route.query.order_no).then(function(response){
      var resBody = response.body;
      if(resBody.code=='000'){
        this.methodList = resBody.data;
        this.methodList.create_time=dateFormat(this.methodList.create_time, 'YYYY-MM-DD HH:mm');
      }else if(resBody.code == '444'){
          this.$router.push({path:'/login'});
      }else{
        if(resBody.mesg){
          MessageBox.alert(resBody.mesg, '提示');
        }
      }
    })
    
    //处理头部（安卓和ios去掉头部）
    this.channel = this.$route.query.channel?this.$route.query.channel:0;

    clearInterval('timer')
  },
  methods: {
    //返回箭头
    iconClick(){
        if(this.channel==0){
            this.$router.go(-1);
        }else if(this.channel==3){
            this.$router.push({ path: '/main/mine' });
        }
       
    },
    //手续费提示
    msg(){
        let rate = this.methodList.commission_rate*100;
        rate=rate.toFixed(2);
        MessageBox.alert('当前取现手续费为'+rate+'%');
    },
    //交易
    repay(){
        if(!this.canClick){
            return;
        }
        // MessageBox.confirm('您将进入支付页面，请不要退出，退出将会导致交易关闭?').then(action => {
            
        // });
        
        //确认取现，完成后去取现中页面
        //弹出对话框，并且自动发送验证码
        this.code.isShow=true;//显示弹框
        this.getCode();//发送验证码
      
    },
    //获取验证码
    getCode(){
      if(!this.code.flag){
        return;
      }
      // 验证码60s
      this.code.flag = !this.code.flag;
      let time = 60;
      let that = this;
      if (!this.code.flag) {
        var timer = setInterval(function () {
          time -= 1;
          that.code.mesg = time + 's后可重新获取';
          if (time == 0) {
            clearInterval(timer);
            that.code.mesg = '获取验证码'
            that.code.flag = true;
          }
        }, 1000)
      };
      // 获取短信验证码
      this.$http.post('/loansupermarket-pay/pay/sendPayValidateCode',{orderNo:this.$route.query.order_no})
        .then((response) => {
          var resBody = response.body;
          if (resBody.code == '000') {
            
          }else if(resBody.code == '444'){
            this.$router.push({path:'/login'});
        }else if(resBody.code=='114'){//卡被删除过，无法取现
            this.code.isShow=false;//隐藏弹框
            this.canClick='false';
            MessageBox.alert(resBody.mesg, '提示');
            return;
        }else {
            this.code.flag = !this.code.flag;
            MessageBox.alert(resBody.mesg, '提示');
            clearInterval(timer);
            that.codeTime = '获取验证码'
          }
        })

    },
    
    cancel(){
        this.code.isShow=false;
        window.sessionStorage.setItem('canClick','true');
    },
    toPay(){
        if(this.flag){
            this.flag=false;
            
            this.$http.post('/loansupermarket-pay/pay/bindCardPay',{orderNo:this.$route.query.order_no,validateCode:this.code.code})
                .then((response) => {
                var resBody = response.body;
                if(resBody.code == '000') {
                    this.$router.push({path:'/main/mine/enchash/repayStatus',query: {code:'000',order_no:this.$route.query.order_no}});
                }else if(resBody.code == '001') {
                    this.$router.push({path:'/main/mine/enchash/repayStatus',query: {code:'001',order_no:this.$route.query.order_no}});
                }else if(resBody.code == '111') {
                    this.$router.push({path:'/main/mine/enchash/repayStatus',query: {code:'111',order_no:this.$route.query.order_no,failMsg:resBody.mesg}});
                }else if(resBody.code == '222') {
                    this.$router.push({path:'/main/mine/enchash/repayStatus',query: {code:'222',order_no:this.$route.query.order_no}});
                }else if(resBody.code == '444'){
                    this.$router.push({path:'/login'});
                }else {
                    if(resBody.mesg){
                        MessageBox.alert(resBody.mesg, '提示');
                    }
                    
                }
            })
            setTimeout(function(){
                this.flag=true;
            },3000);
            
        }
    }

  }

}
</script>
<style lang="scss" scoped>
@import '../../../../scss/variable/base.scss';
.header {
    background: -webkit-linear-gradient(bottom, #2ce9e8, #7dd7ff);
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 1.2rem;
    // background: $primaryColor;
    color: #fff;
    text-align: center;
    font-size: 0.42rem;
    line-height: 1.2rem;
    .icon-qianjin-copy {
        position: absolute;
        left: 0.4rem;
        color: #fff;
    }   
}
.shu{
    height: 1.2rem;
    width: 100%;
}
    .item{
        background:#fff;
        padding:0 0.5333rem;
        overflow: hidden;
        // padding-top: 1.2rem;
        &-list{
            overflow: hidden;
            border-bottom: 1px solid #e5e5e5;
            &-left{
                float: left;
                width: 30%;
                text-align: left;
                font-size: 0.373333rem;
                color: $grayColor;
                line-height: 0.58666rem;
                margin: 0.373333rem 0;
            }
            &-right{
                float:left;
                width: 70%;
                text-align: left;
                font-size: 0.4rem;
                color:#333;
                line-height: 0.58666rem;
                margin: 0.373333rem 0;
                em{
                    font-style: normal;
                }
                i{
                    float: right;
                    width: 0.4rem;
                    height: 0.4rem;
                    margin-top:0.1rem ;
                    background: url(../../../../assets/enchash/tishi.png);
                    background-size: 0.4rem 0.4rem;
                }
                img{
                    float: left;
                    width: 0.58666rem;
                    height: 0.58666rem;
                    margin-right: 0.16rem;
                    span{
                        float: left;
                    }
                }
            }
        }
    }
    .item-list:last-child{
        border: none;
    }
    .btn{
        width: 9rem;
        height: 1.2rem;
        line-height: 1.2rem;
        background: linear-gradient(to right,#2ce9e8,#7cd7ff);
        color: #ffffff;
        margin: 0 auto;
        margin-top: 0.8rem;
        font-size: 0.45333rem;
        border-radius: 0.15rem;
    }
    .btn1{
        width: 9rem;
        height: 1.2rem;
        line-height: 1.2rem;
        background: #ccc;
        color: #ffffff;
        margin: 0 auto;
        margin-top: 0.8rem;
        font-size: 0.45333rem;
        border-radius: 0.15rem;
    }
.verification{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.3);
        z-index: 2000;
        .verificationBox{
            position: absolute;
            top: 50%;
            left:50%;
            width: 6.6rem;
            height: 3.4rem;
            margin-top: -1.7rem;
            margin-left: -3.3rem;
            background: #fff;
            border-radius: 0.15rem;
            .title{
                height: 1.2rem;
                line-height: 1.2rem;
                font-size: 0.4rem;
            }
            .codeBox{
                height: 0.8rem;
                line-height: 0.8rem;
                input{
                    float: left;
                    margin-left: 10%;
                    width: 40%;
                    height:0.8rem;
                    border: 1px solid #ccc;
                    box-sizing: content-box;
                }
                div{
                    float: left;
                    width:39%;
                    height: 0.8rem;
                    line-height: 0.8rem;
                    border: 1px solid #ccc;
                    box-sizing: content-box;
                    border-left: none;
                }
            }
            .footer1{
                margin-top:0.4rem;
                height: 1rem;
                line-height: 1rem;
                border-top:1px solid #ccc;
                .left{
                    float: left;
                    width: 50%;
                    position: relative;
                }
                .left::after{
                    content: '';
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 1px;
                    height: 1rem;
                    background: #ccc;
                }
                .right{
                    float: right;
                    width: 50%;
                }
            }
        }
    }
</style>

